<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 标题 -->
    <title>大王卡</title>
    <!-- 图标 -->
    <link rel="shortcut icon" type="image/x-icon" href="static/images/favicon.ico" />

    <script
      src="https://code.jquery.com/jquery-3.6.4.slim.min.js"
      integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw="
      crossorigin="anonymous"
    ></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      window.jquery = $;
    </script>
  </head>
  <body>
    <div class="ui-mask" style="opacity: 0; display: none">
      <div class="ui-dialog">
        <div class="header">入网许可协议&个人信息收集证明</div>
        <div class="content"></div>
        <button class="button" id="acceptBtn">确认</button>
      </div>
    </div>
    <img id="bk-header" />
    <div class="ui-container">
      <div class="ui-content">
        <div class="ui-recent-list">
          <img class="icon" src="static/images/volume.png" />
          <div class="autoscroll">
            <div class="autoscroll-container"></div>
          </div>
        </div>
      </div>

      <div class="ui-content">
        <div>
          根据国家手机号卡实名要求，请如实填写以下信息，以便我们及时为您送达。
        </div>
        <div class="ui-form">
          <div class="header">
            <div>归属地(可选择)：</div>
            <div id="location" style="flex: 1; text-align: center"></div>
          </div>
          <div class="row">
            <div class="label">姓名</div>
            <input
              id="name"
              class="ui-input"
              placeholder="请输入姓名（已加密）"
            />
          </div>
          <div class="row">
            <div class="label">身份证</div>
            <input id="certNo" class="ui-input" placeholder="请输入身份证" />
          </div>
          <div class="row">
            <div class="label">联系电话</div>
            <input
              id="phone"
              class="ui-input"
              placeholder="请输入联系电话，并保持通畅"
            />
          </div>
          <div id="selectAreaTrigger" class="row ui-cascade-container">
            <div class="label">所在地区</div>
            <div id="selectArea" class="ui-cascade">
              <div class="placeholder">请选择区/县</div>
            </div>
          </div>
          <div class="row">
            <input
              id="address"
              class="ui-input"
              placeholder="街道/镇+村/小区/写字楼+门牌号"
              style="width: 100%"
            />
          </div>
          <div id="selectPhone" class="row ui-cascade-container">
            <div class="label">选择号码</div>

            <div id="phoneNumber" class="ui-cascade">
              <div class="placeholder">请在线选号</div>
            </div>
          </div>
        </div>

        <div class="ui-agreement">
          <input id="agreementAccept" class="checkbox" type="checkbox" />
          <div class="label">我已阅读并同意</div>
          <a class="link" href="javascript:" id="agreement"
            >《入网许可协议&个人信息收集证明》</a
          >
        </div>

        <button id="submitBtn" class="ui-button">
          立即提交，免费送货上门
        </button>

        <div style="font-size: 12px">
          *未满16周岁的，因政策原因不发货，请勿下单，请保持电话畅通，我们将随时可能与您联系。
        </div>
      </div>
    </div>

    <div class="ui-phone-mask hide" style="display: none">
      <div class="ui-select-phone-dialog">
        <div class="ui-controls">
          <button id="selectPhoneClose">
            <img src="static/images/close.png" />
          </button>
        </div>
        <div class="ui-search">
          <img class="ui-search-icon" src="static/images/search.png" />
          <input id="searchPhoneSearch" class="ui-search-input" />
          <button id="searchPhoneSearchBtn" class="ui-search-btn">搜索</button>
        </div>
        <div id="phone-list" class="ui-list"></div>
        <button id="changePhoneBtn" class="ui-change-btn">换一批</button>
      </div>
    </div>

    <div id="submitLoading" class="ui-loading" style="display: none">
      <div class="ui-loading-enter">
        <div class="ui-loading-label">正在提交中...</div>
        <img class="ui-loading-icon" src="static/images/loading.svg" />
      </div>
    </div>
  </body>
</html>
